import React, { useEffect, useState } from 'react';
import styles from './index.less';
import { DatePicker, Statistic, Table } from 'antd';
import moment from 'moment';
import { ShoppingCartOutlined, ContainerOutlined, InboxOutlined, PrinterOutlined } from '@ant-design/icons';
import { getBuyPercents, getNums, getLoginDiary, getOrderPercents, getProducePercents } from '@/api/services';
import Pie from '@/components/Pie';
import Gauge from '@/components/Gauge';

interface TProps {
    sourceData: any;
    getDate: (start: string, end: string) => void;
}

const { RangePicker } = DatePicker;

const Container: React.FC<TProps> = () => {
    const currentDate = new Date();
    const currentYear = currentDate.getFullYear() - 1;
    const tenYearsAgo = currentYear - 10;
    const [nums, setNums] = useState<any>({});
    const [data, setData] = useState<any>([]);
    const [buyPercent, setBuyPercent] = useState<any>([]);
    const [orderPercent, setOrderPercent] = useState<any>([]);
    const [producePercent, setProducePercent] = useState<any>([]);


    useEffect(() => {
        getLoginDiary({
            page: 1,
            size: 5
        }).then((res: any) => {
            if (res.status == 200) {
                console.log(res);
                setData(res.results);
            }
        })
    }, [])

    useEffect(() => {
        getNums().then((res: any) => {
            if (res.status == 200) {
                console.log(res);
                setNums(res);
            }
        })
    }, [])

    useEffect(() => {
        getBuyPercents().then((res: any) => {
            if (res.status == 200) {
                console.log(res);
                const pieData = res.arr.map((item: any) => ({
                    value: item.percent,
                    name: item.type
                }))
                setBuyPercent(pieData);
                // setNums(res);
            }
        })
    }, [])

    useEffect(() => {
        getOrderPercents().then((res: any) => {
            if (res.status == 200) {
                console.log(res);
                const pieData = res.arr.map((item: any) => ({
                    value: item.percent,
                    name: item.type
                }))
                setOrderPercent(pieData);
                // setNums(res);
            }
        })
    }, [])

    useEffect(() => {
        getProducePercents().then((res: any) => {
            if (res.status == 200) {
                console.log(res);
                const pieData = res.arr.map((item: any) => ({
                    value: item.percent,
                    name: item.type
                }))
                setProducePercent(pieData);
                // setNums(res);
            }
        })
    }, [])


    const columns: any = [
        {
            title: '用户名',
            dataIndex: 'userName',
            align: 'center',
        },
        {
            title: '用户角色',
            dataIndex: 'userRole',
            align: 'center',
        },
        {
            title: '登录时间',
            dataIndex: 'userDate',
            align: 'center',
            //   width: 78,
        }
    ];



    return (
        <div className={styles.container}>
            <div className={styles.header}>
                <div className={styles.card} style={{ backgroundColor: '#29B6F6' }}>
                    <div className={styles.icon}>
                        <ContainerOutlined style={{ fontSize: 50, color: 'white' }} onPointerEnterCapture={undefined} onPointerLeaveCapture={undefined} />
                    </div>
                    <div className={styles.cardright}>
                        <div style={{ color: 'white', }}>订单总数</div>
                        <div style={{ color: 'white', fontSize: 30 }}>{nums.orderTotal}</div>
                    </div>
                </div>
                <div className={styles.card} style={{ backgroundColor: '#7E57C2' }}>
                    <div className={styles.icon}>
                        <PrinterOutlined style={{ fontSize: 50, color: 'white' }} onPointerEnterCapture={undefined} onPointerLeaveCapture={undefined} />
                    </div>
                    <div className={styles.cardright}>
                        <div style={{ color: 'white', }}>生产订单数</div>
                        <div style={{ color: 'white', fontSize: 30 }}>{nums.produceTotal}</div>
                    </div>
                </div>
                <div className={styles.card} style={{ backgroundColor: '#33B86C' }}>
                    <div className={styles.icon}>
                        <ShoppingCartOutlined style={{ fontSize: 50, color: 'white' }} onPointerEnterCapture={undefined} onPointerLeaveCapture={undefined} />
                    </div>
                    <div className={styles.cardright}>
                        <div style={{ color: 'white', }}>采购订单数</div>
                        <div style={{ color: 'white', fontSize: 30 }}>{nums.buyTotal}</div>
                    </div>

                </div>
                <div className={styles.card} style={{ backgroundColor: '#317EEB' }}>
                    <div className={styles.icon}>
                        <InboxOutlined style={{ fontSize: 50, color: 'white' }} onPointerEnterCapture={undefined} onPointerLeaveCapture={undefined} />
                    </div>
                    <div className={styles.cardright}>
                        <div style={{ color: 'white', }}>入库请求数</div>
                        <div style={{ color: 'white', fontSize: 30 }}>{nums.inTotal}</div>
                    </div>
                </div>

            </div>
            <div className={styles.charts}>

                <div className={styles.tableContent}>
                    <div className={styles.tableTitle}>登录日志</div>
                    <div className={styles.tableBox}>
                        <Table
                            columns={columns}
                            dataSource={data}
                            className={styles.table}
                            pagination={false}
                            rowKey="id"
                        />
                    </div>
                </div>
                <Pie
                    title="采购订单状态"
                    id="buy"
                    unit='%'
                    pieData={buyPercent}
                />
            </div>
            <div className={styles.charts}>
                <Pie
                    title="订单状态"
                    id="order"
                    unit='%'
                    pieData={orderPercent}
                />
                <Pie
                    title="生产订单状态"
                    id="produce"
                    unit='%'
                    pieData={producePercent}
                />
            </div>
    


        </div>

    );
};

export default Container;
